<template>
	<view class="real">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">实名认证</view>
			</template>
		</uv-navbar>
		<uv-empty icon="lock-fill" text="审核中" mode="permission" iconColor="#f9ae3d" textColor="#f9ae3d"
			v-if="status==0"></uv-empty>
		<uv-empty icon="error-circle-fill" :text="remark" mode="page" iconColor="#f56c6c" textColor="#f56c6c"
			v-if="status==2"></uv-empty>
		<view class="content" v-if="status!=0">
			<!-- <view class="head">识别二维码</view>
			<view class="code"></view>
			<view class="desc">请识别二维码填写信息，生成会员编号，进行绑定</view> -->
			<view class="item">
				<view class="key">姓名</view>
				<view class="item_view">
					<input type="text" placeholder="请输入姓名" v-model="form.name">
				</view>
			</view>

			<view class="item">
				<view class="key">证件类型</view>
				<view class="item_view" @click="open_picker('idtype')">
					<view class="value" v-if="show_form.idtype">{{show_form.idtype}}</view>
					<view class="tips" v-else>请选择证件类型</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">证件号</view>
				<view class="item_view" @click="open('card','identity')">
					<view class="value" v-if="form.identity">{{form.identity}}</view>
					<view class="tips" v-else>请输入身份证号</view>
				</view>
			</view>
			<view class="sub_head">
				<view class="sub_key">上传身份证件照</view>
				<view class="sub_desc">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
			</view>
			<view class="id_card">
				<view class="cell" @click="uploadImage('front')">
					<image :src="show_form.front" v-if="show_form.front"></image>
					<image src="@/static/images/m31.png" v-else></image>
					<view>点击上传身份证人像面</view>
				</view>
				<view class="cell" @click="uploadImage('back')">
					<image :src="show_form.back" v-if="show_form.back"></image>
					<image src="@/static/images/m32.png" v-else></image>
					<view>点击上传身份国旗面</view>
				</view>
			</view>

			<view class="item">
				<view class="key">证件有效期类型</view>
				<view class="item_view" @click="open_picker('idvalidity_type')">
					<view class="value" v-if="show_form.idvalidity_type">{{show_form.idvalidity_type}}</view>
					<view class="tips" v-else>点击选择有效期类型</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">证件有效期开始时间</view>
				<view class="item_view" @click="open_calendar('idvalidity_begin')">
					<view class="value" v-if="form.idvalidity_begin">{{form.idvalidity_begin}}</view>
					<view class="tips" v-else>点击选择有效期开始时间</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">证件有效期结束时间</view>
				<view class="item_view" @click="open_calendar('idvalidity_end')">
					<view class="value" v-if="form.idvalidity_end">{{form.idvalidity_end}}</view>
					<view class="tips" v-else>点击选择有效期结束时间</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">开户银行</view>
				<view class="item_view" @click="open_picker('card_bank')">
					<view class="value" v-if="show_form.card_bank">{{show_form.card_bank}}</view>
					<view class="tips" v-else>点击选择开户银行</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">银行所在地区</view>
				<view class="item_view" @click="open_address_picker">
					<view class="value" v-if="form.card_locales">{{form.card_locales}}</view>
					<view class="tips" v-else>点击选择开户银行</view>
					<image src="@/static/images/r2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="key">开户账号</view>
				<view class="item_view">
					<input type="text" placeholder="请输入开户账号" v-model="form.card_account">
				</view>
			</view>
			<view class="item">
				<view class="key">银行开户人名称</view>
				<view class="item_view">
					<input type="text" placeholder="请输入银行开户人名称" v-model="form.card_name">
				</view>
			</view>
			<view class="item">
				<view class="key">
					<text>银行卡预留手机号</text>
					<view class="warn">(手机号需与银行卡同一户名,否则会认证失败)</view>
				</view>

				<view class="item_view" @click="open('number','card_mobile')">
					<view class="value" v-if="form.card_mobile">{{form.card_mobile}}</view>
					<view class="tips" v-else>请输入银行卡预留手机号</view>
				</view>
			</view>
			<view class="item">
				<view class="key">
					<text>账户手机号</text>
					<view class="warn">(本人常用手机号)</view>
				</view>
				<view class="item_view" @click="open('number','mobile')">
					<view class="value" v-if="form.mobile">{{form.mobile}}</view>
					<view class="tips" v-else>请输入账户手机号</view>
				</view>
			</view>
			<view class="item">
				<view class="key">短信验证码</view>
				<view class="item_view">
					<input type="text" placeholder="请输入短信验证码" v-model="form.verify">
					<view class="get_code" v-if="isTimer">{{time}}s</view>
					<view class="get_code" v-else @click="get_code">发送验证码</view>
				</view>
			</view>
			<view class="submit">
				<view @click="submit">确认</view>
			</view>
		</view>
		<uv-picker ref="picker" keyName="name" :columns="columns" @confirm="picker_confirm"></uv-picker>
		<uv-calendars ref="calendars" mode="multiple" @confirm="confirm" />
		<uv-keyboard ref="keyboard" :showTips="false" :mode="mode" dotDisabled @change="change"
			@backspace="backspace"></uv-keyboard>

		<uv-picker ref="address_picker" :columns="addressList" keyName="label" @change="address_change"
			@confirm="address_confirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		regions
	} from "@/static/js/region.js"
	import {
		smsHbsk,
		uploadHbsk,
		realname,
		realnamePost
	} from "@/request/api";

	import {
		onUnload
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef,
		computed
	} from "vue";

	const provinces = ref([]),
		citys = ref([]),
		areas = ref([]);
	const pickerValue = ref([0, 0, 0]);

	const addressList = computed(() => {
		return [provinces.value, citys.value, areas.value];
	});

	const region_text = ref("");
	const address_picker = shallowRef();

	const hander = () => {
		provinces.value = regions.sort((left, right) => (Number(left.value) > Number(right.value) ? 1 : -1));
		citys.value = provinces.value[0]?.children || [];
		areas.value = citys.value[0]?.children || [];
		// address_picker.value.setIndexs([0, 0, 0], true);
	};
	hander();
	const open_address_picker = () => address_picker.value.open();

	const address_change = (e) => {
		let {
			columnIndex,
			index,
			indexs
		} = e;
		if (columnIndex === 0) {
			citys.value = provinces.value[index]?.children || []
			areas.value = citys.value[0]?.children || []
			address_picker.value.setIndexs([index, 0, 0], true)
		}
		if (columnIndex === 1) {
			areas.value = citys.value[index]?.children || []
			address_picker.value.setIndexs(indexs, true)
		}
	};
	const address_confirm = (e) => {
		let province_id = e.value[0].value;
		let city_id = e.value[1].value;
		let area_id = e.value[2].value;
		form.card_locates = [province_id, city_id, area_id];
		form.card_locales = `${e.value[0].label}-${e.value[1].label}-${e.value[2].label}`;
	};

	const show_form = reactive({
		idtype: "",
		idvalidity_type: "",
		front: "",
		back: "",
	});
	const form = reactive({
		name: "",
		idtype: "",
		identity: "",
		front: "",
		back: "",

		idvalidity_type: "",
		idvalidity_begin: "",
		idvalidity_end: "",

		card_bank: "",
		card_locates: [],
		card_locales: "",
		card_account: "",
		card_name: "",
		card_mobile: "",
		mobile: "",
		verify: "",
	});
	let key = "";

	const calendars = shallowRef();
	const open_calendar = (field) => {
		key = field;
		calendars.value.open();
	};
	const confirm = item => form[key] = item.fulldate;

	const picker = shallowRef();
	const columns = ref();

	const columns_value = [
		[{
			name: '非长期有效',
			code: 0
		}, {
			name: '长期有效',
			code: 1
		}]
	];

	const open_picker = (field) => {
		key = field;

		if (key == 'idtype') {
			columns.value = idtype_columns;
		}
		if (key == 'idvalidity_type') {
			columns.value = columns_value;
		}
		if (key == 'card_bank') {
			columns.value = bank_columns;
		}

		picker.value.open();
	};
	const picker_confirm = (e) => {
		let item = e.value[0];
		form[key] = item.code;
		show_form[key] = item.name;
	};

	const keyboard = shallowRef();
	const mode = ref("");

	const open = (type, field) => {
		mode.value = type;
		key = field;
		keyboard.value.open();
	};

	const change = val => form[key] += val;
	const backspace = () => {
		if (form[key].length) form[key] = form[key].substr(0, form[key].length - 1);
	}
	const uploadImage = (key) => {
		uni.chooseImage({
			success: async (res) => {
				let tempFilePaths = res.tempFilePaths;
				let filePath = tempFilePaths[0];
				show_form[key] = filePath;
				let {
					code
				} = await uploadHbsk({
					filePath
				});
				form[key] = code;
			}
		})
	};
	const submit = async () => {
		await realnamePost(form);
		uni.$uv.toast("操作成功");
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/tabbar/my'
			})
		}, 1000);
	};

	let idtype_columns = [],
		bank_columns = [];

	let status = ref(0),
		remark = ref("");
	const getDeta = async () => {
		let {
			idtype,
			hbsk_bank,
			realname: real_val
		} = await realname();
		let keys = Object.keys(idtype);
		let temp = [];
		keys.forEach(key => {
			temp.push({
				name: idtype[key],
				code: key
			})
		});
		idtype_columns = [temp];
		bank_columns = [hbsk_bank];

		status.value = real_val?.status;
		remark.value = real_val?.remark;
	};
	getDeta();
	let time = ref(60),
		timer = null,
		isTimer = ref(false);
	const get_code = async () => {
		if (!form.mobile) {
			uni.$uv.toast("请输入手机号");
			return false;
		};
		isTimer.value = true;
		timer = setInterval(() => {
			time.value--
			if (time.value < 0) {
				isTimer.value = false;
				time.value = 60;
				clearInterval(timer);
			};
		}, 1000);
		await smsHbsk({
			mobile: form.mobile
		});
		uni.$uv.toast("验证码已发送,请查看");
	};
	onUnload(() => clearInterval(timer));
</script>

<style scoped lang="scss">
	.real {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.content {
			padding: 40rpx 20rpx;
			box-sizing: border-box;

			.head {
				color: #333333;
				font-size: 28rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.code {
				width: 600rpx;
				height: 600rpx;
				border-radius: 20rpx;
				margin: 20rpx auto 25rpx;
				background: #EEEEEE;
			}

			.desc {
				line-height: 40rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
				margin-bottom: 56rpx;
				padding: 0 90rpx;
				box-sizing: border-box;
			}

			.item {
				.key {
					color: #333333;
					font-size: 28rpx;
					padding-left: 10rpx;
					padding-top: 30rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;

					.warn {
						color: #f00;
						font-size: 24rpx;
						padding-top: 10rpx;
						box-sizing: border-box;
					}
				}

				.item_view {
					width: 100%;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					padding: 0 30rpx 0 42rpx;
					box-sizing: border-box;
					background: #EEEEEE;
					display: flex;
					align-items: center;

					view {
						width: 100%;
						height: 110rpx;
						line-height: 110rpx;
						// font-size: 28rpx;

						&.tips {
							color: #808080;
						}
					}

					input {
						width: 100%;
						height: 110rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					.get_code {
						width: 220rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 28rpx;
						font-weight: bold;
						border-radius: 16rpx;
						background: #CA1C1D;
					}
				}
			}

			.sub_head {
				padding: 40rpx 10rpx 30rpx;
				box-sizing: border-box;

				.sub_key {
					color: #333333;
					font-size: 30rpx;
				}

				.sub_desc {
					color: #999999;
					font-size: 24rpx;
					padding-top: 14rpx;
					box-sizing: border-box;
				}
			}

			.id_card {
				padding: 0 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.cell {
					width: 320rpx;
					height: 290rpx;
					border-radius: 10rpx;
					padding: 33rpx 0 30rpx;
					box-sizing: border-box;
					background: url(@/static/images/m30.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					image {
						width: 251rpx;
						height: 167rpx;
					}

					view {
						color: #525357;
						font-size: 24rpx;
					}
				}
			}

			.submit {
				margin-top: 70rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				view {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #CA1C1D;
				}
			}
		}
	}
</style>